import React, { useEffect, useState } from "react";
import {  Button, Upload   } from "antd";
import axios from "axios";

const App: React.FC = () => {
  const [urls, setUrls] = useState<string[]>([]);

  useEffect(() => {
    axios.get("/api/upload/list").then((resp) => {
      // 获取到oss上面的图片的路径
      console.log(resp.data.data.objects);
      setUrls(resp.data.data.objects.map((v: any) => v.url));
    });
  }, []);

  // 点击上传将图片上传到oss上面
  const onChange = (e:  any) => {
    if (e.file.response) {
      const { data } = e.file.response;
      setUrls((urls) => [...urls, data.url]);
    }
  };

  return (
    <div>
      <Upload.Dragger action="/api/upload/oss" onChange={(e) => onChange(e)}>
        <div style={{ height: 300 }}>
          <Button>点我上传</Button>
        </div>
      </Upload.Dragger>
       
      <div>
        {urls.map((v, i) => {
          return <img key={i} src={v} height={100} style={{ margin: 10 }} />;
        })}
      </div>
    </div>
  );
};

export default App;
